<template>
  <div class="system-role-container app-container">
    <el-tabs type="border-card" v-model="state.tab_attr.activeName" @tab-click="handleClick">
      <el-tab-pane label="积分明细" name="detail">
        <el-card>
          <div class="system-user-search mb15">
            <el-form inline>
              <el-row>
                <el-form-item>
                  <el-input v-model="state.listQuery.name" label="员工姓名" placeholder="请输入员工姓名"
                            style="max-width: 180px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="state.listQuery.point_level" placeholder="请选择积分等级"
                            style="max-width: 180px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="state.listQuery.award_deduction_type" placeholder="请选择奖扣类型"
                            style="max-width: 180px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="state.listQuery.creation_date" placeholder="请选择审批时间"
                            style="max-width: 180px"></el-input>
                </el-form-item>
                <el-form-item>
                  <z-datetime-picker
                      v-model="state.listQuery.updation_date"
                      placeholder="日期组件"
                      style="max-width: 180px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="ml10" @click="search">查询
                  </el-button>
                </el-form-item>
              </el-row>

            </el-form>
          </div>
          <div class="point_total_class">
            <span class="span_class">审核中：77</span>
            <span class="span_class">已同意：289</span>
            <span class="span_class">已拒绝：15</span>
            <span class="span_class">已撤销：56</span>
          </div>
          <div>
            <z-table
                :columns="state.columns"
                :data="state.listData"
                ref="tableRef"
                v-model:page-size="state.listQuery.pageSize"
                v-model:page="state.listQuery.page"
                :total="state.total"
                @pagination-change="getList"
            />
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="积分统计" name="statistics">
        <el-card>
          <div class="system-user-search mb15">
            <el-form inline>
              <el-row style="margin-bottom: 1px">
                <el-form-item>
                  <el-input v-model="state.listQuery.name" label="员工姓名" placeholder="请输入员工姓名"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="state.listQuery.point_level" placeholder="请选择积分等级"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="state.listQuery.award_deduction_type" placeholder="请选择奖扣类型"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="state.listQuery.creation_date" placeholder="请选择审批时间"></el-input>
                </el-form-item>
                <el-form-item>
                  <z-datetime-picker
                      v-model="state.listQuery.updation_date"
                      placeholder="日期组件"
                      style="max-width: 180px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="ml10" @click="query">查询
                  </el-button>
                </el-form-item>
              </el-row>

            </el-form>
          </div>
          <div class="point_total_class">
            <el-button link style="float: right;" @click="getPointsRank">积分排行榜
            </el-button>
          </div>
          <div>
            <z-table
                :columns="state.statistics_columns"
                :data="state.statisticsTableListData"
                ref="statisticsTableRef"
                v-model:page-size="state.listQueryStatistics.pageSize"
                v-model:page="state.listQueryStatistics.page"
                :total="state.statisticsTotal"
                @pagination-change="getStatisticsList"
            />
          </div>
        </el-card>
        <PointsRank ref="PointsRankRef" @change="getPointsRank"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="pointDetail">
import {onMounted, reactive, ref} from 'vue';
import {ElButton} from 'element-plus';
import {userApplyDetailApi} from "/@/api/point_management/point_report";
import PointsRank from "/@/views/point_management/point_report/points_rank.vue";


const tableRef = ref();
const statisticsTableRef = ref();
const PointsRankRef = ref();
const state = reactive({
  columns: [
    {key: 'participant_user_name', label: '员工姓名', width: '', align: 'center', show: true},
    {key: 'participant_user_number', label: '员工工号', width: '', align: 'center', show: true},
    {key: 'point_level', label: '积分等级', width: '', align: 'center', show: true},
    {key: 'award_deduction_type', label: '奖扣类型', width: '', align: 'center', show: true},
    {key: 'award_deduction_value', label: '奖扣分数', width: '', align: 'center', show: true},
    {key: 'updation_date', label: '审批时间', width: '', align: 'center', show: true},
  ], statistics_columns: [
    {key: 'participant_user_name', label: '员工姓名', width: '', align: 'center', show: true},
    {key: 'participant_user_number', label: '员工工号', width: '', align: 'center', show: true},
    {key: 'point_level', label: '积分等级', width: '', align: 'center', show: true},
    {key: 'award_deduction_type', label: '奖扣类型', width: '', align: 'center', show: true},
    {key: 'award_deduction_value_sum', label: '总分数', width: '', align: 'center', show: true},
    {key: 'updation_date', label: '审批时间', width: '', align: 'center', show: true},
  ],
  // list
  listData: [],
  statisticsTableListData: [],
  tableLoading: false,
  total: 0,
  statisticsTotal: 0,
  listQuery: {
    page: 1,
    pageSize: 10,
    participant_user_name: '',
    point_level: null,
    award_deduction_type: null,
    updation_date: null,
    creation_date: null,
  }, tab_attr: {
    activeName: 'detail',
    isActiveName: {
      detail: true,
      statistics: false
    }
  }, listQueryStatistics: {
    page: 1,
    pageSize: 10,
    participant_user_name: '',
    point_level: null,
    award_deduction_type: null,
    updation_date: null,
    creation_date: null,
  },
});
// 初始化表格数据
const getList = () => {
  console.log('我进入页面了')
  tableRef.value.openLoading()
  userApplyDetailApi().userApplyDetail(state.listQuery)
      .then(res => {
        state.listData = res.data.rows
        state.total = res.data.rowTotal
      })
      .finally(() => {
        tableRef.value.closeLoading()
      })
};
const getStatisticsList = () => {
  statisticsTableRef.value.openLoading()
  userApplyDetailApi().userApplyStatistics(state.listQuery)
      .then(res => {
        state.statisticsTableListData = res.data.rows
        state.total = res.data.rowTotal
      })
      .finally(() => {
        statisticsTableRef.value.closeLoading()
      })
};

// 查询
const search = () => {
  state.listQuery.page = 1
  getList()
}
const query = () => {
  state.listQuery.page = 1
  getStatisticsList()
}

// 获取tab
const handleClick = (tab) => {
  if (tab.name === "detail") {
    state.tab_attr.isActiveName.detail = true;
    state.tab_attr.isActiveName.statistics = false;

  } else if (tab.name === "statistics") {
    state.tab_attr.isActiveName.detail = false
    state.tab_attr.isActiveName.statistics = true;

  }
}

// 积分排行榜
const getPointsRank = () => {
  PointsRankRef.value.openDialog();
  PointsRankRef.value.getPointsRank();
};

// 页面加载时
onMounted(() => {
  getList();
  getStatisticsList();
});

</script>
<style scoped>

.table_header_class {
  background-color: #a9dbfb;
}

:deep(.el-input__inner) {
  border-color: #ffffff;
}

.point_total_class {
  background-color: #ecf5ff;
  margin-bottom: 5px;

  .span_class {
    margin-right: 20px;
  }
}
</style>